<template>
  <div class="address-container">
    <van-nav-bar title="地址" left-text="返回" left-arrow @click-left="$router.back()" />
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />

    <van-popup
      v-model:show="showAddressEdit"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :address-info="addressInfo"
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import { areaList } from '@vant/area-data'
import type { AddressEditInfo } from 'vant'
import { showToast } from 'vant'
import { reactive, ref, watch, type Ref } from 'vue'

// 地址列表
const originList = [
  {
    id: '1',
    name: '张三',
    tel: '13000000000',
    province: '北京市',
    city: '北京市',
    county: '东城区',
    country: '',
    addressDetail: '杭州市西湖区 黄龙万科中心',
    areaCode: '110101',
    postalCode: '064100',
    address: '',
  },
  {
    id: '2',
    name: '李四',
    tel: '13100000000',
    province: '北京市',
    city: '北京市',
    county: '东城区',
    country: '',
    addressDetail: '杭州市西湖区 黄龙万科中心',
    areaCode: '110101',
    postalCode: '064100',
    address: '',
  },
  {
    id: '3',
    name: '王五',
    tel: '13800000000',
    province: '北京市',
    city: '北京市',
    county: '东城区',
    country: '',
    addressDetail: '杭州市西湖区 黄龙万科中心',
    areaCode: '110101',
    postalCode: '064100',
    isDefault: true,
    address: '',
  },
].map((item) => {
  item.address = item.province + item.city + item.county + item.addressDetail
  return item
})
const list = reactive(originList)
const chosenAddressId = ref('3')
watch(chosenAddressId, (newVal: string) => {
  sessionStorage.setItem(
    'currentAddr',
    JSON.stringify(list.find((item) => item.id === newVal))
  )
})
const currentIndex = ref(-1)

// 添加或编辑地址表单
const searchResult: Ref<Array<any>> = ref([])
const addressInfo = ref({})
const showAddressEdit = ref(false)

// 公共部分
const onAdd = () => {
  currentIndex.value = -1
  addressInfo.value = {}
  showAddressEdit.value = true
}
const onEdit = (item: any, index: number) => {
  currentIndex.value = index
  addressInfo.value = item
  showAddressEdit.value = true
}
const onSave = (content: AddressEditInfo) => {
  // 如果编辑内容中设置为默认选中,删除之前添加了默认选中属性的该值
  if (content.isDefault) {
    delete (list.find((item) => item.isDefault === true) as any).isDefault
  }
  // 当currentIndex === -1 表示是新增
  if (currentIndex.value === -1) {
    // 添加id是因为v-model绑定的值（chosenAddressId）匹配元素的id去选中
    list.push({
      id: (list.length + 1).toString(),
      ...content,
    } as any)
  } else {
    // 更新address属性用于展示
    list[currentIndex.value] = { ...content } as any
  }
  // 临时变量恢复默认值
  currentIndex.value = -1
  addressInfo.value = {}
  showAddressEdit.value = false
  showToast('save')
}

const onDelete = () => {
  showToast('delete')
}

const onChangeDetail = (val: any) => {
  if (val) {
    // 这里要发送请求更新搜索结果
    searchResult.value = [
      {
        name: '黄龙万科中心',
        address: '杭州市西湖区',
      },
    ]
  } else {
    searchResult.value = []
  }
}
</script>

<style></style>
